<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div id="app">
            <!-- r如果要使用组件，直接把组件的名称， 以HTML的形式，引入到页面中，即可 -->
            <my-coml></my-coml>
        </div>
        <template id="tmpl">
            <!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构  -->
            <h2>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h2>
        </template>
        <script src="./lib/vue-2.4.0.js"></script>
        <script>
            //组件化：从ui界面的角度进行划分的；前端的组件化，方面ui组件的重用

            //第一种创建组件模板的方法：
            //使用Vue.extend来创建全局vue组件
            // var coml = Vue.extend({
            //     template:'<h2>Vue.extend来创建全局vue组件</h2>'
            // })
            // //使用Vue.component('组件名称', 创建出来的组件模型)
            // //组件名称需要使用 驼峰命名法，在引用标签时 大写改为小写 两个单词使用-连接
            // //不使用驼峰明法，直接调用就可以
            // Vue.component('myComl', coml)

            //第二种创建组件模板的方法：
            // Vue.component('myComl', Vue.extend({
            //     template:'<h2>Vue.extend来创建全局vue组件</h2>'
            // }))
            
            //不论那种方式创建出来的组件 ，组件的template属性指定的模板内容有且只有一个根元素
            // Vue.component('myComl', {
            //     template:'<h2>Vue.component来创建全局vue组件</h2>'
            // })


            Vue.component('myComl', {
                template:'#tmpl'
            })
            

            var vm = new Vue({
                el: '#app',
                data: {

                }
            })
        </script>
    </body>
</html>